<script setup lang="ts">
import { CountUp } from "countup.js";
import {useTemplateRef, onMounted} from "vue";

interface IProps {
  amount?: string;
  title?: string;
  tips?: string;
  number1?: number;
  number2?: number;
  subtitle?: string;
}

const {
  title = "商品总销量",
  tips = "所有的商品总销量",
  number2 = 43235,
  subtitle = "商品总销量",
  number1 = 54352,
  amount = ""
} = defineProps<IProps>();

const countUp1Ref = useTemplateRef<HTMLElement>("countUp1Ref");
const countUp2Ref = useTemplateRef<HTMLElement>("countUp2Ref");
const countOption = {
  prefix: amount === "saleroom" ? "￥" : ""
}

onMounted(() => {
  // 前缀：方法一：直接 span 标签
  // 前缀：方法二：countUp 的 option 配置前缀
  const countUp1 = new CountUp(countUp1Ref.value!, Number(number1), countOption);
  const countUp2 = new CountUp(countUp2Ref.value!, Number(number2), countOption);
  countUp1.start()
  countUp2.start()
})

</script>

<template>
  <div class="count-card">
    <div class="header">
      <span>{{ title }}</span>
      <el-tooltip :content="tips" placement="top" effect="light">
        <el-icon>
          <InfoFilled />
        </el-icon>
      </el-tooltip>
    </div>
    <h3 class="content">
<!--      <span v-if="amount === 'saleroom'">￥</span>-->
      <span class="count" ref="countUp1Ref">{{ number1 }}</span>
    </h3>
    <div class="footer">
      <span>{{ subtitle }}：</span>
<!--      <span v-if="amount === 'saleroom'">￥</span>-->
      <span ref="countUp2Ref">{{ number2 }}</span>
    </div>
  </div>
</template>

<style scoped>
.count-card {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .header {
    display: flex;
    height: 38px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    justify-content: space-between;
    align-items: center;
  }

  .content {
    display: flex;
    flex: 1;
    font-size: 26px;
    color: rgba(0, 0, 0, 0.85);
    align-items: flex-start;
  }

  .footer {
    display: flex;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, 0.45);
    border-top: 1px solid #f0f0f0;
  }
}
</style>
